<template>
	<view id="gold">
		<!-- 头部 -->
		<view class="gold-background">
			<view class="gold-paice">
				<text>{{boxtop.referencePrice}}</text>
			</view>
			<view class="gold-newest">最新现金(元/克)</view>

			<view class="gold-Decline">
				<view class="gold-item">
					<text class="item-text">{{boxtop.changePercent}}</text><br>
					<text class="item-texttwo">今日涨跌幅(%)</text>
				</view>
				<view class="gold-item">
					<text class="item-text">{{boxtop.theMinimumAmount}}</text><br>
					<text class="item-texttwo">起购价格</text>
				</view>
			</view>
		</view>

		<!-- 金价走势 -->
		<view class="gold-trend">
			<!-- 金价走势标题 -->
			<navigator class="exclusive-title" url="/pages/gold/goldPriceTrend/goldPriceTrend">
				<view>
					<view class="title-box"></view>
					<view class="title">金价走势</view>
				</view>
				<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="title-log"></image>
			</navigator>

			<!-- 折线图 -->
			<view class="line-chart">
				<view class="charts-box">
				  <qiun-data-charts
				    type="line"
				    :chartData="renderdata"
				    background="none"
				    :animation="false"
				    :ontouch="true"
				  />
				</view>
				<view class="charts-item">
					<view class="lastItem" :class="{active:item._id==Time}" v-for="item in TimeSharing" :key="item._id" @tap="changeTime(item)">{{item.name}}</view>
				</view>
			</view>
			
			<!-- 安全保障标题 -->
			<view class="security-title">
				<view class="title-box"></view>
				<view class="title">安全保障</view>
			</view>
			
			<view class="security-box">
				
				<view class="security-every">
					<view class="every-item">
						<image src="https://z3.ax1x.com/2021/04/22/cOFLqS.png" mode="" class="every-image"></image>
						<view class="every-text">知名金融机构</view>
					</view>
					<view class="every-item">
						<image src="https://z3.ax1x.com/2021/04/22/cOkSGn.png" mode="" class="every-image"></image>
						<view class="every-text">精选优质产品</view>
					</view>
					<view class="every-item">
						<image src="https://z3.ax1x.com/2021/04/22/cOkPMV.png" mode="" class="every-image"></image>
						<view class="every-text">监管机构备案</view>
					</view>
				</view>
				
				<view class="security-describe">
					<text class="describe">本产品为民生银行推出的积存金产品，通过民生银行电子账户进行交易，黄金价格实时波动。产品风险等级为中等，不保证最低收益，投资风险由投资人本人承担</text>
				</view>
				
			</view>
			
			<!-- 交易规则，信息披露，常见问题 -->
			<view class="information">
		
				<view class="information-item" v-for="item in information" :key="item._id">
					<text class="information-text" :class="{informationText:item.name==informationActive}" @tap="switchData(item.name)">{{item.name}}</text>
					<view :class="{informationActive:item.name==informationActive}" @tap="switchData"></view>
				</view>
				
			</view>
			
			<!-- 交易规则 -->
			<view class="" v-if="informationActive=='交易规则'">
				<view class="essential-information">
					<view class="essential-titll">
						<text class="titll-text">购买与领取</text>
					</view>
					
					<view class="essential-vice-titll">
						<view class="vice-titll">购买金额</view>
						<view class="vice-text">{{transactionRule.minMonetary}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">年龄范围</view>
						<view class="vice-text">{{transactionRule.ageRange}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">领取金额</view>
						<view class="vice-text no-line">{{transactionRule.receivePrice}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">资金到账</view>
						<view class="vice-text">{{transactionRule.receiveDate}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">交易时间</view>
						<view class="vice-text no-line">{{transactionRule.trade_date}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">兑换实金</view>
						<view class="vice-text no-line">{{transactionRule.exchange}}</view>
					</view>
				
				</view>
				<!-- 收益与费用 -->
				<view class="agreement">
					<view class="essential-titll">
						<text class="titll-text">收益与费用</text>
					</view>
					
					<view class="essential-vice-titll">
						<view class="vice-titll">生息规则</view>
						<view class="vice-text">{{earningsCost.costRule}}</view>
					</view>
					
					<view class="essential-vice-titll">
						<view class="vice-titll">费用规则</view>
						<view class="vice-text">{{earningsCost.interestBearingRules}}</view>
					</view>
					
				</view>
			</view>
			
			<!-- 信息披露 -->
			<view class="" v-if="informationActive=='信息披露'">
				<view class="essential-information">
					<view class="essential-titll">
						<text class="titll-text">基本信息</text>
					</view>
					
					<view class="essential-vice-titll">
						<view class="vice-titll">产品名称</view>
						<view class="vice-text">{{informationDis.productName}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">发行机构</view>
						<view class="vice-text">{{informationDis.issuer}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">黄金价格</view>
						<view class="vice-text no-line">{{informationDis.goldPrice}}</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">风险等级</view>
						<view class="vice-text">{{informationDis.riskGrade}}</view>
					</view>
				
				</view>
				<!-- 查看协议 -->
				<view class="agreement">
					<view class="essential-titll">
						<text class="titll-text">查看协议</text>
					</view>
					
					<view class="agreement-vice-titll">
						<view class="agreement-titll">《客户协议》</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="agreement-image"></image>
					</view>
					<view class="agreement-vice-titll">
						<view class="agreement-titll">《账户管理协议》</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="agreement-image"></image>
					</view>
					<view class="agreement-vice-titll">
						<view class="agreement-titll">《民生银行跨行通协议》</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="agreement-image"></image>
					</view>
					<view class="agreement-vice-titll">
						<view class="agreement-titll">《个人税收声明》</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="agreement-image"></image>
					</view>
					<view class="agreement-vice-titll">
						<view class="agreement-titll">《账户即时通协议》</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="agreement-image"></image>
					</view>
					
				</view>
			</view>
			
			<!-- 常见问题 -->
			<!-- 常见问题 -->
			<view class="essential-information problem-active" v-if="informationActive=='常见问题'">
				
				<view class="problem">
					<text class="problem-questions">什么是基金？</text>
				</view>
				<view class="problem-tips">
					<text class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>
				<view class="problem">
					<text class="problem-questions">基金是什么？</text>
				</view>
				<view class="problem-tips">
					<text class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>
		
			</view>
			
		
			<view class="purchase" @tap="goldjump">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapActions,mapState,mapMutations} = createNamespacedHelpers('gold')
	const {mapState:goldMapState}=createNamespacedHelpers('UserInfor')
	export default {
		onLoad() {
			this.getGoldChart()
			this.getGoldPage() 
		},
		data() {
			
			return {
				//定义自己是黄金
				chanping:'黄金',
				Time:2,
				TimeSharing:[
					{_id:1,name:'分时',},
					{_id:2,name:'近一月'},
					{_id:3,name:'近半年'},
					{_id:4,name:'近一年'}
				],
				information:[
					{_id:1,name:"交易规则"},
					{_id:2,name:"信息披露"},
					{_id:3,name:"常见问题"}
				],
				informationActive:"信息披露"
			}
		},
		computed:{
			...goldMapState(['userData']),
			...mapState(['renderdata','boxtop','informationDis','transactionRule','earningsCost'])
		},
		methods: {
			...mapActions(['getGoldChart','getGoldPage']),
			...mapMutations(['see']),
			//立即购买
			goldjump(){
				// console.log(this.userData);
				///判断是否有token
				if(this.userData.token){
					uni.navigateTo({
						url:'/pages/buynow/buynow?buyMin='+this.boxtop.referencePrice
						+'&chanping='+this.chanping
					})
				}else{
					uni.navigateTo({
						url:'../login/login'
					})
				}
			},
			
			///点击事件修改金价走势图近一月
			changeTime(item){
				this.Time=item._id
				this.see(item._id)
			},
			//信息披露，常见问题，交易规则标题切换
			switchData(val){
				this.informationActive=val
			},
			
		}
	}
</script>

<style>
	#gold {
		position: relative;
	}

	.gold-background {
		width: 100%;
		height: 400rpx;
		/* border: 1px solid red; */
		background: url('https://z3.ax1x.com/2021/04/22/cOFgKK.png') no-repeat;
		background-size: 100% 430rpx;
		position: relative;
	}

	.gold-paice {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		text-align: center;
		font-size: 60rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
		padding-top: 20rpx;
		margin-bottom: 8rpx;
	}

	.gold-newest {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto 8rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}

	.gold-Decline {
		width: 100%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-evenly;
	}

	.gold-item {
		width: 260rpx;
		height: 140rpx;
		/* border: 1px solid red; */
		line-height: 60rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.item-text {
		font-size: 40rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item-texttwo {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}


	/* 金价走势 */
	.gold-trend {
		width: 100%;
		height: auto;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		/* border: 1px solid red; */
		position: absolute;
		top: 335rpx;
		background-color: #FFFFFF;
	}

	/* 金价走势标题 */
	.exclusive-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		clear: both;
	}

	.title-box {
		/* border: 1px solid red; */
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 36rpx;
		margin-right: 10rpx;
		/* float: left; */
		display: inline-block;
	}

	.title {
		/* border: 1px solid red; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		display: inline-block;
	}

	.title-log {
		/* border: 1px solid red; */
		width: 28rpx;
		height: 28rpx;
		margin-top: 36rpx;
	}

	/* 折线图 */
	.line-chart { 
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto;

		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}
	.charts-item{
		width: 620rpx;
		height: 52rpx;
		margin: 40rpx auto 30rpx;
		/* border: 1px solid red; */
		display: flex;
	}
	.lastItem{
		width: 100%;
		height: 52rpx;
		border: 1rpx solid #F3F3F3;
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.active{
		background: #3476F1;
		color: #FFFFFF;
	}
	
	/* 安全保障 */
	.security-title{
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
		clear: both;
	}
	.security-box{
		width: 700rpx;
		height: 380rpx;
		background: #FFFFFF;
		margin: 0rpx auto;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
		/* border: 1px solid red; */
	}
	.security-every{
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		display: flex;
	}
	.every-item{
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-bottom: 10rpx;
	}
	.every-image{
		width: 94rpx;
		height: 94rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	.every-text{
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.security-describe{
		width: 640rpx;
		height: 172rpx;
		border-top: 1rpx solid rgba(0,0,0,0.03);
		margin: 26rpx auto 24rpx;
		padding-top: 22rpx;
	}
	.describe{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #999999;
	}
	
	/* 信息披露*/
	.information{
		width: 700rpx;
		height: 114rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
	}
	.information-item{
		width: 148rpx;
		height: 86rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-top: 28rpx;
	}
	.information-text{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	.informationActive{
		width: 54rpx;
		height: 8rpx;
		background: #3476F1;
		border-radius: 6rpx;
		margin: 10rpx auto 0rpx;
	}
	.informationText{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476F1;
	}
	
	/* 基本信息 */
	.essential-information{
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}
	.essential-titll{
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
		/* border: 1px solid red; */
		margin: 0rpx auto;
	}
	.titll-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 88rpx;
	}
	
	
	.essential-vice-titll{
		width: 642rpx;
		height: auto;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
	}
	.vice-titll{
		width: 150rpx;
		height: auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}
	.vice-text{
		width: 100%;
		height: auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
		word-wrap: break-word;
		/* border: 1px solid red; */
		padding-top: 25rpx;
		padding-bottom: 20rpx;
	}
	.no-line{
		line-height: 2;
	}
	
	.agreement{
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 40rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}
	.agreement-vice-titll{
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
		justify-content: space-between;
		line-height: 88rpx;
	}
	.agreement-titll{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		/* border: 1px solid red; */
	}
	.agreement-image{
		width: 28rpx;
		height: 28rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
	}
	
	
	/* 常见问题 */
	.problem-active{
		padding: 30rpx;
		/* border: 1px solid red; */
		width: 670rpx;
	}
	.problem{
		text-align: right;
		margin: 20rpx;
	}
	.problem-questions{
		width: auto;
		height: 88rpx;
		display: inline-block;
		background-color: #3476F1;
		padding: 0rpx 15rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 24rpx;
	}
	
	.problem-tips{
		width: 622rpx;
		height: auto;
		border: 1rpx solid #F1F1F1;
		padding: 15rpx;
		border-radius: 24rpx;
		color: #727272;
		font-size: 24rpx;
	}
	
	
	
	
	/* 立即购买 */
	.purchase{
		width: 100%;
		height: 88rpx;
		background: #3476F1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 80rpx;
	}
</style>
